<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .div-wrap{
                position: relative;
                margin-bottom: 20px;
            }
            .select-wrap{
                overflow: hidden;
                margin-left: 100px;
                width: 18px;
            }
            .select{
                margin-left: -100px;
                border: 1px solid #ccc;
                border-radius: 5px;
                width: 118px !important;
                height: 32px !important;
            }
            .input{
                position: absolute000;
                top: 1px;
                left: 1px;
                border: none;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
                padding: 0 5px;
                width: 90px;
                height: 30px;
                color: #212121;
                text-align: center;
                font-size: 16px;
            }
        </style>
        <script>
        	function Οο(ths) {
        		console.log(ths);
        		console.log(ths.parentNode);
        		console.log(ths.parentNode.nextSibling);
        		console.log(ths.parentNode.nextSibling.value);
        		console.log(ths.value);
        	}
        </script>
    </head>
    <body>
        <div class='div-wrap'>
            <span class='select-wrap'>
                <select id="s1" class='select' onchange="Οο(this);">
                    <option>111</option>
                    <option>222</option>
                    <option>333</option>
                </select>
            </span>
            <input class='input' value='111'>
        </div>
    </body>
</html>